<template>
    <div class="outmain ba_f">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>活码管理</span>
            </div>
        </div>
        <div class="ba_f8 pad_20">
            <div class="lh25 msgtext fon_12">
                温馨提示：请保证到当前小程序主体已认证并且已完善资料；<br>
                1、什么是活码？意思是指生成的二维码所记录的内容是动态的（可改变的），即二维码生成后，扫码所转化还原出现的信息是可以更改的;<br>
                2、登录<a href="https://mp.weixin.qq.com/" target="_blank">微信小程序后台</a>,依次找到菜单 开发管理-开发设置，启用并添加“扫普通链接二维码打开小程序” 路径
                <span @click="tishiImg(1)" class="subjectcolor2 curs mar_l5">提示</span>;<br>
                3、下载校验文件，上传至网站根目录<span @click="tishiImg(2)" class="subjectcolor2 curs mar_l5">提示</span>;<br>
                4、设置规则，页面路径：yb_wm/order/other/smjh，具体配置如图<span @click="tishiImg(3)" class="subjectcolor2 curs mar_l5">提示</span>；<br>
                5、保存后并发布，稍等几分钟之后刷新本页面，即可生成二维码。<span @click="tishiImg(4)" class="subjectcolor2 curs mar_l5">提示</span>
            </div>
        </div>
        <div class="flex flex-y-top mar_t20">
            <div class="mar_r40">
                <el-button type="primary" size="medium" @click="handleEdit">新增活码</el-button>
                <el-button size="medium" @click="handleDelete" type="danger" plain>批量删除</el-button>
            </div>
        </div>
        <div class="tabledata mar_t20">
            <el-table
                    v-loading="listLoading"
                    :data="list"
                    :element-loading-text="elementLoadingText"
                    stripe
                    style="width: 100%"
                    @selection-change="setSelectRows">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="ID"
                        width="100"
                >
                </el-table-column>
                <el-table-column
                        prop="typeName"
                        label="二维码图片"
                        width="200"
                >
                  <template slot-scope="scope">
                    <div class="flex flex-y-top">
                      <el-popover trigger="hover" placement="top">
                        <p><img :src="scope.row.mediaUrl" class="listImgWidth"/></p>
                        <div slot="reference" class="name-wrapper">
                          <div class="imgbox"><img :src="scope.row.mediaUrl" class="goodlogo"/></div>
                        </div>
                      </el-popover>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                        prop="url"
                        label="链接"
                >
                </el-table-column>
                <el-table-column
                        prop="tableName"
                        label="绑定关系"
                        width="200"
                >
                </el-table-column>
                <el-table-column
                        prop="createdAt"
                        label="创建时间"
                        width="260"
                >
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="280"
                >
                    <template slot-scope="scope">
                        <div class="flex">
                            <a :href='downloadCode(scope.row)'><el-button type="text">下载二维码</el-button></a>
                            <el-button type="text" @click="handleEditCode(scope.row)" class="mar_l10">编辑</el-button>
                            <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                            <el-button type="text" @click="copyText(scope.row.url)">复制链接</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="page.total"
                    :page-size="page.pagesize"
                    :current-page.sync='page.currentPage'
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <edit ref="edit" @fetchData="fetchData"></edit>
        <editTable ref="editTable" @fetchData="fetchData"></editTable>
        <el-dialog title="操作提示" :visible.sync="dialogTableVisible4" :close-on-click-modal='false' width="1300px" class="tishidialog">
            <div class="t_c">
                <div v-show="tishiType=='1'" class="t_l">
                    <img src="../../../assets/img/instore/tishi1.png" class="mar_l20">
                </div>
                <div v-show="tishiType=='2'" class="t_c">
                    <img src="../../../assets/img/instore/tishi2.png" class="mar_l20">
                </div>
                <div v-show="tishiType=='3'" class="t_c">
                    <img src="../../../assets/img/instore/tishi3.jpg" class="mar_l20">
                </div>
                <div v-show="tishiType=='4'" class="t_l">
                    <img src="../../../assets/img/instore/tishi4.png" class="mar_l20">
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {codeList,delCode} from "@/api/instore";
    import Edit from "../../../views/instore/components/codeedit";
    import EditTable from "../../../views/instore/components/codeedittable";
    import index from '../../../api/index';
    import {mapState} from "vuex";
    export default {
        components: {Edit,EditTable},
        computed: {
            ...mapState(['storeId']),
        },
        created() {
            this.fetchData();
        },
        data() {
            return {
                formInline: {
                    keyword: '',
                    typeId: '',
                    type: '',
                    areaId: '',
                    label: ''
                },
                tishiType:'',
                list: [],
                listLoading: false,
                selectRows: "",
                elementLoadingText: "正在加载...",
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                },
                dialogTableVisible4:false,
            }
        },
        methods: {
            async fetchData() {
                const {data, count} = await codeList({page: this.page.currentPage, type: 1,storeId:this.storeId});
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
            setSelectRows(val) {
                this.selectRows = val;
            },
            handleEdit(row) {
                this.$refs["edit"].setStoreId(this.storeId);
                if (row.id) {
                    this.$refs["edit"].showEdit(row);
                } else {
                    this.$refs["edit"].showEdit();
                }
            },
            handleEditCode(row){
                this.$refs["editTable"].setStoreId(this.storeId);
                if (row.id) {
                    this.$refs["editTable"].showEdit(row);
                } else {
                    this.$refs["editTable"].showEdit();
                }
            },
            copyText(row) {
                let Url2 = row;
                var oInput = document.createElement('input');
                oInput.value = Url2;
                document.body.appendChild(oInput);
                oInput.select();
                document.execCommand("Copy");
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                this.$message({
                    message: '复制成功',
                    type: 'success'
                });
            },
            handleDelete(row) {
                if (row.id) {
                    this.$baseConfirm("你确定要删除当前项吗", null, async () => {
                        const {msg} = await delCode({id: row.id,});
                        this.$baseMessage(msg, "success");
                        this.fetchData();
                    });
                } else {
                    if (this.selectRows.length > 0) {
                        const id = this.selectRows.map((item) => item.id);
                        this.$baseConfirm("你确定要删除选中项吗", null, async () => {
                            const {msg} = await delCode({id,});
                            this.$baseMessage(msg, "success");
                            this.fetchData();
                        });
                    } else {
                        this.$baseMessage("未选中任何行", "error");
                        return false;
                    }
                }
            },
            downloadCode(row){
                let backendPath = index.backendPath
                return backendPath + "channel/in-store/download-code?url="+row.mediaUrl
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            tishiImg(type){
                this.tishiType = type
                this.dialogTableVisible4 = true
            },
        }
    }
</script>
<style lang="scss">
    .el-button.is-plain:focus, .el-button.is-plain:hover {
        background: #F56C6C;
        border-color: #F56C6C;
        color: #fff;
    }
</style>
<style lang="scss" scoped>
.listImgWidth {
  width: 300px;
  height: 300px;
}
</style>
